<template>
  <div>
    <h1>后端搜索功能</h1>

    <input v-model="query" type="text" placeholder="请输入关键字" />

    <hr />

    <p>搜索结果：{{ result }}</p>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import axios from "axios";

const query = ref("");
const result = ref("");

let ABC: AbortController | null = null;
watch(query, (value) => {
  if (ABC) {
    ABC.abort();
  }

  ABC = new AbortController();

  axios
    .get("http://localhost:3000/search", {
      params: {
        name: value,
      },
      signal: ABC.signal,
    })
    .then(({ data }) => {
      // console.log("data", data);
      result.value = data;
    });
});
</script>
